<template>
    <div class="active">
        <div class="active_title">推荐活动</div>

        <ul>
            <li v-for="(v,i) in arr" :key="i">
                <img :src="v.imgUrl">
                <p>{{v.text|subText}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
let str="说唱人物志Vol.6：Travis Scott的奇妙游乐园"
console.log(str.length)
export default {
    data(){
        return {
            arr:[
                {
                   "imgUrl":"http://p1.music.126.net/4DEXmfPCP8fX0vBginQVrg==/109951164512713223.jpg",
                   "text":"邀请好友，得充电宝/蓝牙耳机！" 
                },
                {
                   "imgUrl":"http://p1.music.126.net/BJRZnLpPKDhwraR4VPNwww==/109951163336398920.jpg",
                   "text":"说唱人物志Vol.6：Travis Scott的奇妙游乐园" 
                },
                {
                   "imgUrl":"http://p4.music.126.net/iKLk7Y_MZupPNwI1dWUteg==/19105114044419759.jpg",
                   "text":"点击翻开你的一起听年度报告" 
                },
                {
                   "imgUrl":"http://p1.music.126.net/FA_VlD3Mk7vsPpkdwo7uHg==/109951165637052209.jpg",
                   "text":"火前留名：挑战你的听歌品味" 
                }
            ]
        }
    },
    filters:{
        subText(val){
            if(val.length>27){
                return val.substr(0,26)+"..."
            }else{
                return val
            }
        }
    }
}
</script>

<style scoped>
  .active{
      width: 6.84rem;
      height: 5.5rem;
      /* background-color: pink; */
      margin: 0 auto;
  }

  .active .active_title{
      width: 100%;
      height: .8rem;
      /* background: skyblue; */
      font-size: .28rem;
      font-weight: bold;
      line-height: .8rem;
  }

  .active>ul>li{
      width: 100%;
      height: 1.05rem;
      padding-top: .1rem;
      /* background-color: orange; */
  }

  .active>ul>li img{
      float: left;
      width: .83rem;
      height: .83rem;
      border-radius: .1rem;
      margin-right: .2rem;
  }

  .active>ul>li p{
      float: left;
      width: 5.8rem;
      height: 100%;
      font-size: .32rem;
      border-bottom: 1px solid red;
      /* background-color: pink; */
      padding-top: .3rem;
  }

  .active>ul>li p:last-of-type{
      border: none;
  }
</style>

